<template>
	<view class="item-box">
		<navigator hover-class="on" :url="`/pages/goods/details?id=${item.id}`" class="item" v-for="(item,index) in list">
			<image :src="item.image" mode="aspectFill"></image>
			<view class="text">
				<view>
					<view class="h1">{{item.store_name}}</view>
					<view class="tag">
						<view class="span gwtj">
							官方推荐
						</view>
						<view class="span dtgm">
							<view class="em">谜</view>
							答题购买
						</view>
					</view>
				</view>
				<view>
					<view class="money-box">
						<view class="money">
							<view class="em">￥</view>{{item.price}}
						</view>
						<view class="msg">谜礼价</view>	
					</view>
					<view class="sold">已售{{item.sales}}</view>
				</view>
			</view>
		</navigator>
	</view>
</template>

<script setup>
	import {ref} from "vue"
	let props = defineProps({
			list:{
				type:Array,
				default:[]
			}
		});
	
</script>

<style lang="scss">
	.item-box{
		margin-top:40rpx;
		padding-bottom: 40rpx;
		.item{
			display: flex;
			margin-top:24rpx;
			&:nth-child(1){
				margin-top:0;
			}
			image{
				width:272rpx;
				height:272rpx;
			}
			.text{
				flex:1;
				margin-left:24rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.h1{
					margin-top:8rpx;
					font-size: 32rpx;
					line-height: 40rpx;
					font-weight: bold;
					color:#141311;
					display: -webkit-box;
					  -webkit-line-clamp: 2; /* 限制显示的行数为3行 */
					  -webkit-box-orient: vertical;
					  overflow: hidden;
				}
				.tag{
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					margin-top:20rpx;
					gap: 8rpx;
					.gwtj{
						background-color: #FFF1F0;
						color:#EA3949;font-size: 20rpx;
						line-height: 36rpx;
						padding:0 8rpx;
					}
					.dtgm{
						border:1rpx solid #FF8E67;
						box-sizing: border-box;
						border-radius: 6rpx;
						display: flex;
						font-size: 20rpx;
						padding:0 8rpx;
						line-height: 34rpx;
						color:#F5493D;
						.em{
							padding-right:8rpx;border-right:1rpx dashed #F4B192;
							margin-right:8rpx;
						}
					}
				}
				.money-box{
					display: flex;align-items: center;
					.money{
						font-size:34rpx;font-weight: bold;color:#F5493D;
						display: flex;
						align-items: flex-end;
						line-height: 1;
						.em{
							font-size:24rpx;
						}
					}
					.msg{font-size:22rpx;color:#F5493D;margin-left:8rpx;}
				}
				.sold{
					color:#A8A8A8;font-size: 24rpx;
					margin-top:24rpx;line-height: 1;
					padding-bottom: 8rpx;
				}
			}
		}
	}
</style>